<template>
  <div class="total-wraper" v-loading="loading">
    <div class="mask" v-show="showMask" @click="showMask=false"></div>
    <div class="big-image" v-show="showMask" @click="showMask=false" :style="{'top':positionTop}">
      <img :src="bigImageUrl"
           style="width:800px;minHeight:600px;borderRadius:20px"
           alt=""></div>
    <div class="verify-outwraper">
      <!--home-->
      <span class="nav-bar" @click="$router.push('verificationIndex')">Home</span>
      <!--仅当ad status 为reported（8）时显示-->
      <section class="reported-area" v-if="status==8">
        <div>
          <p class="reported-title">Reported problems</p>
          <p v-for="item in reportedReason" class="reported-by">{{item}}</p>
        </div>
        <div>
          <p class="reported-title">Reported by</p>
          <p class="reported-by">{{reportedBy}}</p>
        </div>
        <div>
          <p class="reported-title">Reported date</p>
          <p class="reported-date">{{reportedDate}} ({{reportedDiffTime}})</p>
        </div>
      </section>
      <el-form :inline="true" label-position="top" :model="submitForm" size="mini" ref="ruleForm"
               class="demo-ruleForm main-search-box" v-loading.fullscreen.lock="fullscreenLoading">
        <!--statys & listingtype-->
        <el-row>
          <el-form-item label="Status" style="width: 200px;margin-right: 10px">
            <el-select style="width: 200px;" v-model="submitForm.status" disabled>
              <el-option v-for="i in statusOption" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Listing type" style="width: 200px;margin-right: 10px">
            <el-select style="width: 200px;" class="editStyle" v-model=" submitForm.listingType" disabled>
              <el-option v-for="i in listingTypeOption" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!--property type & subproperty type-->
        <el-row>
          <el-form-item label="Property Type" style="width: 200px;margin-right: 10px">
            <el-select style="width: 200px;" v-model="submitForm.propertyTypeId" disabled>
              <el-option v-for="rg in propertyType" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Property SubType" style="width: 200px;margin-right: 10px">
            <el-select style="width: 200px;" v-model="submitForm.propertySubTypeId" disabled>
              <el-option v-for="ts in propertySubType" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!--region &township-->
        <el-row>
          <el-form-item label="Region" prop="regionId">
            <el-select style="width: 200px" v-model="submitForm.regionId" disabled>
              <el-option v-for="rg in regions" :key="rg.value" :label="rg.text" :value="rg.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Township" prop="townshipId">
            <el-select style="width: 200px" v-model="submitForm.townshipId" disabled>
              <el-option v-for="ts in townships" :key="ts.value" :label="ts.text" :value="ts.value"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!--address-->
        <el-row>
          <el-form-item label="Address">
            <el-input v-model="submitForm.address" style="min-width:440px;" disabled></el-input>
          </el-form-item>
        </el-row>
        <!--property name-->
        <el-row>
          <el-form-item label="PropertyName">
            <el-input v-model="submitForm.propertyName" style="min-width:440px;" disabled></el-input>
          </el-form-item>
        </el-row>
        <!--latitude &longitude-->
        <el-row>
          <el-form-item label="Latitude">
            <el-input v-model="submitForm.latitude" disabled></el-input>
          </el-form-item>
          <el-form-item label="Longitude">
            <el-input v-model="submitForm.longitude" disabled></el-input>
          </el-form-item>
        </el-row>
        <!--total building floor & floor number-->
        <el-row>
          <el-form-item label="TotalBuildingFloor" v-if="this.submitForm.propertyTypeId!=4" prop="totalFloor">
            <el-select v-model="submitForm.totalFloor" disabled>
              <el-option v-for="c in floorsTotal" :key="c.value" :label="c.text" :value="c.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('m.FloorNumber')"
                        v-if="this.submitForm.propertyTypeId!=3 && this.submitForm.propertyTypeId!=4">
            <el-select v-model="submitForm.floorNo" disabled>
              <el-option v-for="c in floors" :key="c.value" :label="c.text" :value="c.value"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!--master & bedroom & bathroom-->
        <el-row v-if="submitForm.propertyTypeId!=4">
          <el-form-item label="Master">
            <el-select v-model="submitForm.masterroom" disabled>
              <el-option v-for="c in rooms" :key="c.value" :label="c.text" :value="c.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Bathrooms" label-width="0">
            <el-select v-model="submitForm.bathroom" disabled>
              <el-option v-for="c in rooms" :key="c.value" :label="c.text" :value="c.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Bedrooms" label-width="0">
            <el-select v-model="submitForm.bedroom" disabled>
              <el-option v-for="c in rooms" :key="c.value" :label="c.text" :value="c.value"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!--floor size-->
        <div v-if="submitForm.propertyTypeId!=4">
          <span style="display:inline-block;lineHeight:28px;marginRight:30px;">FloorSizefeet(feet)</span>
          <el-form-item>
            <el-radio-group v-model="submitForm.floorLengthWidth" disabled>
              <el-radio label="0" name="floorSize">LengthWidth</el-radio>
              <el-radio label="1" name="floorSize">Area</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="submitForm.floorLengthWidth == '0'" class="length-width">
            <span>Length</span>
            <input type="text" v-model.number="submitForm.floorLength" disabled>
            <span>X</span>
            <span>Width</span>
            <input type="text" v-model.number="submitForm.floorWidth" disabled>
            <span>=</span>
            <input type="text" v-model.number="submitForm.floorSize" disabled>
          </div>
          <el-row v-else>
            <div class="length-width">
              <span>Area</span>
              <input type="text" v-model.number="submitForm.floorSize" disabled>
            </div>
          </el-row>
        </div>
        <!--land size-->
        <div v-if="submitForm.propertyTypeId!=1 && submitForm.propertyTypeId!=2">
          <span style="display:inline-block;lineHeight:28px;marginRight:30px;">LandSizefeet(feet)</span>
          <el-form-item>
            <el-radio-group v-model="submitForm.landLengthWidth" disabled>
              <el-radio label="0" name="landSize">LengthWidth</el-radio>
              <el-radio label="1" name="landSize">Area</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="submitForm.landLengthWidth == '0'" class="length-width">
            <span>Length</span>
            <input type="text" v-model.number="submitForm.landLength" disabled>
            <span>X</span>
            <span>Width</span>
            <input type="text" v-model.number="submitForm.landWidth" disabled>
            <span>=</span>
            <input type="text" v-model.number="submitForm.landSize" disabled>
          </div>
          <el-row v-else>
            <div class="length-width">
              <span>Area</span>
              <input type="text" v-model.number="submitForm.landSize" disabled>
            </div>
          </el-row>
        </div>
        <!--Price-->
        <el-row>
          <!--根据currenid传不同的price，usd 或者 mmk-->
          <el-form-item label="Price" prop="price">
            <el-input v-model.number="submitForm.price" :maxlength="18" disabled></el-input>
          </el-form-item>
          <!--facingType furnishingType-->
          <el-form-item label="Price type">
            <el-select v-model="submitForm.currencyId" disabled>
              <el-option v-for="c in currencyData" :key="c.value" :label="c.text" :value="c.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Condition">
            <el-select v-model="submitForm.conditionTypeId" disabled>
              <el-option v-for="c in conditionType" :key="c.value" :label="c.text" :value="c.value"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!--furnishing-->
        <el-row v-if="submitForm.furnishingId">
          <el-form-item label="Furnishing">
            <el-select v-model="submitForm.furnishingId" disabled>
              <el-option v-for="c in furnishingType" :key="c.value" :label="c.text" :value="c.value"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!--build year-->
        <el-row v-if="submitForm.buildYear">
          <el-form-item label="BuiltYear" label-width="0" v-if="this.submitForm.propertyTypeId!=4">
            <el-date-picker
              v-model="submitForm.buildYear"
              type="year"
              value-format="yyyy"
              disabled
            >
            </el-date-picker>
          </el-form-item>
        </el-row>
        <!--facing-->
        <el-row v-if="submitForm.facingId">
          <el-form-item label="Facing">
            <el-select v-model="submitForm.facingId" disabled>
              <el-option v-for="c in facingType" :key="c.value" :label="c.text" :value="c.value"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!--&lt;!&ndash;Indoor Features&ndash;&gt;-->
        <!--<el-row v-if="submitForm.indoorFeatures.length>0">-->
        <!--<el-form-item label="IndoorFeatures" class="agent-feature" prop="indoorFeatures">-->
        <!--<el-checkbox-group-->
        <!--v-model="submitForm.indoorFeatures" disabled>-->
        <!--<el-checkbox v-for="e in indoorFeaturesType" :label="e.value" :key="e.value">{{e.text}}</el-checkbox>-->
        <!--</el-checkbox-group>-->
        <!--</el-form-item>-->
        <!--</el-row>-->
        <!--&lt;!&ndash;Outdoor Features&ndash;&gt;-->
        <!--<el-row v-if="submitForm.outdoorFeatures.length>0">-->
        <!--<el-form-item label="OutdoorFeatures" class="agent-feature" prop="outdoorFeatures">-->
        <!--<el-checkbox-group-->
        <!--v-model="submitForm.outdoorFeatures" disabled>-->
        <!--<el-checkbox v-for="e in outdoorFeaturesType" :label="e.value" :key="e.value">{{e.text}}</el-checkbox>-->
        <!--</el-checkbox-group>-->
        <!--</el-form-item>-->
        <!--</el-row>-->
        <!--&lt;!&ndash;Special Features&ndash;&gt;-->
        <!--<el-row v-if="submitForm.specialFeatures.length>0">-->
        <!--<el-form-item label="SpecialFeatures" class="agent-feature" prop="specialFeatures">-->
        <!--<el-checkbox-group-->
        <!--v-model="submitForm.specialFeatures" disabled>-->
        <!--<el-checkbox v-for="e in specialFeaturesType" :label="e.value" :key="e.value">{{e.text}}</el-checkbox>-->
        <!--</el-checkbox-group>-->
        <!--</el-form-item>-->
        <!--</el-row>-->
        <div class="line" v-if="submitForm.indoorFeatures.length>0"></div>
        <div class="price-box" v-if="submitForm.indoorFeatures.length>0">
          <div class="title">IndoorFeatures</div>
          <div class="content">
            <div class="icon-box">
              <span class="icon-item" v-for="item in submitForm.indoorFeatures"><i class="el-icon-check green-icon"></i>{{getIndoorArrItem(item)}}</span>
            </div>
          </div>
        </div>

        <div class="line" v-if="submitForm.outdoorFeatures.length>0"></div>
        <div class="price-box" v-if="submitForm.outdoorFeatures.length>0">
          <div class="title">OutdoorFeatures</div>
          <div class="content">
            <div class="icon-box">
              <span class="icon-item" v-for="item in submitForm.outdoorFeatures"><i
                class="el-icon-check green-icon"></i>{{getOutdoorArrItem(item)}}</span>
            </div>
          </div>
        </div>

        <div class="line" v-if="submitForm.specialFeatures.length>0"></div>
        <div class="price-box" v-if="submitForm.specialFeatures.length>0">
          <div class="title">SpecialFeatures</div>
          <div class="content">
            <div class="icon-box">
              <span class="icon-item" v-for="item in submitForm.specialFeatures"><i
                class="el-icon-check green-icon"></i>{{getSpecialFeaturesTypeArrItem(item)}}</span>
            </div>
          </div>
        </div>
        <!--Description-->
        <el-row>
          <el-form-item label="Description">
            <el-input
              style="min-width:500px;"
              type="textarea"
              :rows="3"
              :maxlength="2000"
              placeholder=""
              v-model="submitForm.description"
              disabled
            >
            </el-input>
          </el-form-item>
        </el-row>
        <!--Title (Burmese)-->
        <el-row>
          <el-form-item label="Title(Burmese)">
            <el-input
              style="min-width:500px;"
              type="textarea"
              :rows="2"
              :maxlength="80"
              placeholder=""
              v-model="submitForm.burmeseTitle"
              disabled>
            </el-input>
          </el-form-item>
        </el-row>
        <!--Title (English)-->
        <el-row>
          <el-form-item label="Title(English)">
            <el-input
              style="min-width:500px;"
              type="textarea"
              :rows="2"
              :maxlength="80"
              placeholder=""
              v-model="submitForm.englishTitle"
              disabled>
            </el-input>
          </el-form-item>
        </el-row>
        <!--photo-->
        <el-row id="photo">
          <el-form-item label="" class="agent-photo">
            <showManyImages ref="uploadPhotos" @headCallBack="showBigImage"></showManyImages>
          </el-form-item>
        </el-row>
      </el-form>
      <el-row>
        <el-button type="success" @click="approve">Approve</el-button>
      </el-row>
      <hr/>
      <el-form label-position="top" :rules="reasonRules" :model="uploadForm" ref="ruleForm" size="mini">
        <el-form-item label="Reject reason" prop="reasonArr">
          <div>
            <el-checkbox-group v-model="uploadForm.reasonArr">
              <el-checkbox label="Title" name="type" style="margin-right: 30px">Title</el-checkbox>
              <el-checkbox label="Photo" name="type">Photo</el-checkbox>
              <el-checkbox label="Price" name="type">Price</el-checkbox>
              <el-checkbox label="Description" name="type">Description</el-checkbox>
              <el-checkbox label="Brand" name="type">Brand</el-checkbox>
              <el-checkbox label="Duplicate" name="type">Duplicate</el-checkbox>
              <div class="other" style="width: 300px">
                <!--勾选other 上传一个空字符串-->
                <el-checkbox label="" name="type" @change="ifHaveOther=!ifHaveOther">Others</el-checkbox>
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder=""
                  v-model="uploadForm.notes"
                  v-if="ifHaveOther">
                </el-input>
              </div>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-button type="danger" @click="reject">Reject</el-button>
      </el-form>
      <hr/>
      <p>Higher level to decide</p>
      <el-button type="info" @click="notSure">Not Sure</el-button>
      <hr/>
      <!--Ad update log 日志-->
      <div class="verify-table">
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          border
          style="width: 100%">
          <!--Ad Status-->
          <el-table-column
            prop="id"
            label="Ad Status"
            align="center"
            min-width="80">
          </el-table-column>
          <!--Verification Status-->
          <el-table-column
            prop="name"
            label="Verification Status"
            align="center"
            min-width="100">
          </el-table-column>
          <!--Updated Date-->
          <el-table-column
            prop="name"
            label="Updated Date"
            align="center"
            min-width="100">
          </el-table-column>
          <!--Updated By-->
          <el-table-column
            prop="account"
            label="Updated By"
            align="center"
            min-width="150">
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block" style="margin-top: 15px;text-align: center;">
          <el-pagination
            @size-change="handleChangeSize"
            @current-change="handleChangePage"
            :current-page="pageData.pageNum"
            :page-size="pageData.pageSize"
            :page-sizes="[10, 20, 50, 100, 500]"
            :page-count="pageInfo.totalPages"
            :total="pageInfo.totalCount"
            layout="total, prev, pager, next, jumper, sizes">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getPropertyVerifyData, propertyVerifyApprove, propertyVerifyNotSure, propertyVerifyReject,
    getPropertyVerifyDataById, getPropertyLog
  } from '../../api/guc_api.js';

  import showManyImages from '@/components/imageComponents/showManyImages'

  import qs from 'qs';
  import regions from '@/json/region';
  import townships from '@/json/township';
  import categoryData from '@/json/category.json';
  import propertyType from '@/json/propertyType'
  import propertySubType from '@/json/propertySubType'
  import floors from '@/json/floor'
  import floorsTotal from '@/json/floorTotal'
  import rooms from '@/json/master_bedroom_bathroom'
  import currencyData from '@/json/CurrencyData'
  import furnishingType from '@/json/furnishingType'
  import facingType from '@/json/facingType'
  import indoorFeaturesType from '@/json/indoorFeaturesType'
  import outdoorFeaturesType from '@/json/outdoorFeaturesType'
  import specialFeaturesType from '@/json/specialFeaturesType'

  export default {
    name: 'verifyProperty',
    data() {
      return {
        //property id
        propertyId: '',
        fullscreenLoading: false,
        submitForm: {
          status: '',
          listingType: '',
          propertyTypeId: '',
          propertySubTypeId: '',
          regionId: '',
          townshipId: '',
          address: '',
          propertyName: '',
          latitude: '',
          longitude: '',
          totalFloor: '',
          floorNo: '',
          masterroom: '',
          bedroom: '',
          bathroom: '',
          floorLengthWidth: '0',
          floorLength: '',
          floorWidth: '',
          floorSize: '',
          landLengthWidth: '0',
          landLength: '',
          landWidth: '',
          landSize: '',
          price: '',
          currencyId: '',
          conditionTypeId: '',
          conditionType: '',
          furnishingId: '',
          facingId: '',
          buildYear: '',
          indoorFeatures: [],
          outdoorFeatures: [],
          specialFeatures: [],
          description: '',
          burmeseTitle: '',
          englishTitle: '',
        },
        statusOption: [
          {
            label: 'Draft',
            value: '1',
          },
          {
            label: 'Active',
            value: '2',
          },
          {
            label: 'OFFER_ACCEPTED',
            value: '3',
          },
          {
            label: 'CLOSED',
            value: '4',
          },
          {
            label: 'INACTIVE',
            value: '5',
          },
          {
            label: 'DELETE',
            value: '6',
          },
          {
            label: 'Pending',
            value: '7',
          },
          {
            label: 'REJECTED',
            value: 8,
          },
        ],
        listingTypeOption: [
          {
            label: 'Rent',
            value: 2,
          },
          {
            label: 'Sale',
            value: 1,
          },
        ],
        conditionType: [
          {'value': null, 'text': ''},
          {'value': 1, 'text': 'Negotiable'},
          {'value': 2, 'text': 'View to Offer'}
        ],
        //本地数据
        propertyType,
        propertySubType,
        floorsTotal,
        floors,
        rooms,
        currencyData,
        furnishingType,
        facingType,
        indoorFeaturesType,
        outdoorFeaturesType,
        specialFeaturesType,
        regions,
        townships,
        categoryData,
        otherForm: {},
        //reject reason 校验规则
        reasonRules: {
          reasonArr: [
            {type: 'array', required: true, message: 'Please Select', trigger: 'change'}
          ],
        },
        //reject 需要上传的表单数据
        uploadForm: {
          reasonArr: [],
          notes: '',
        },
        //控制是否显示other输入框
        ifHaveOther: false,
        tableLoading: false,
        //表格分页
        tableData: [],
        pageData: {
          pageNum: 1,
          pageSize: 10,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        //ad 状态
        status: '',
        //用来表示是哪种审核
        verificationStatus: '',
        //显示大图
        showMask: false,
        bigImageUrl: '',
        //局部加载动画
        loading: false,
        //举报数据
        reportedBy: '',
        reportedDate: '',
        reportedDiffTime: '',
        reportedReason: [],
        indoorArr: [],
        outdoorArr: [],
        specialFeaturesTypeArr: [],
      }
    },
    methods: {
      getIndoorArrItem(it) {
        let str = ''
        this.indoorFeaturesType
          .forEach((item) => {
            if (item.value == it) {
              str = item.text || ''
            }
          })
        return str
      },
      getOutdoorArrItem(it) {
        let str = ''
        this.outdoorFeaturesType
          .forEach((item) => {
            if (item.value == it) {
              str = item.text || ''
            }
          })
        return str
      },
      getSpecialFeaturesTypeArrItem(it) {
        let str = ''
        this.specialFeaturesType
          .forEach((item) => {
            if (item.value == it) {
              str = item.text || ''
            }
          })
        return str
      },
      //错误提示信息
      messageToastErr(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'error'
        })
      },
      //成功消息提示
      messageToastSuccess(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 5000,
          type: 'success'
        })
      },
      //警告消息提示
      messageToastWarning(msg) {
        this.$message({
          showClose: true,
          message: msg,
          type: 'warning'
        });
      },
      //分页控制
      handleChangeSize(val) {
        this.pageData.pageSize = parseInt(val)
        this.pageData.pageNum = 1
        this.getList()
      },
      handleChangePage(val) {
        this.pageData.pageNum = val
        this.getList()
      },
      //初始化
      initForm() {
        this.loading = true
        let params = {
          status: this.submitForm.status,
          verificationStatus: this.verificationStatus,
        }
        getPropertyVerifyData(params).then(res => {
          this.loading = false
          // 拿到新数据后页面置顶
          window.scrollTo(0, 0);
          if (res.data.errorID === 0) {
            let data = JSON.parse(res.data.object).list[0]
            // property id 初始化
            this.propertyId = data.id || ''
            this.submitForm.listingType = data.transactionTypeId || ''
            // property type初始化
            this.submitForm.propertyTypeId = data.propertyTypeId || ''
            this.submitForm.propertySubTypeId = data.propertySubTypeId || ''
            //region township初始化
            this.submitForm.regionId = data.regionId || ''
            this.submitForm.townshipId = data.townshipId || ''
            // address 输入框的内容要unicode转交集
            this.submitForm.address = this.$translateLang(data.street || '', 'unicodeTozawgyi') || ''
            //property name
            this.submitForm.propertyName = this.$translateLang(data.propertyName || '', 'unicodeTozawgyi') || ''
            //latitude longitude
            this.submitForm.latitude = data.latitude || ''
            this.submitForm.longitude = data.longitude || ''
            //totalfloor floornumber
            this.submitForm.totalFloor = data.totalFloor || ''
            this.submitForm.floorNo = data.floorNo || ''
            //master bathroom bedroom
            this.submitForm.masterroom = data.masterBedrooms || ''
            this.submitForm.bedroom = data.bedrooms || ''
            this.submitForm.bathroom = data.bathrooms || ''
            //floor size
            if (data.floorLength && data.floorWidth) {
              this.submitForm.floorLengthWidth = '0'
            }
            else {
              this.submitForm.floorLengthWidth = '1'
            }
            this.submitForm.floorLength = data.floorLength || ''
            this.submitForm.floorWidth = data.floorWidth || ''
            this.submitForm.floorSize = data.floorSize || ''
            //land size
            if (data.landLength && data.landWidth) {
              this.submitForm.landLengthWidth = '0'
            }
            else {
              this.submitForm.landLengthWidth = '1'
            }
            this.submitForm.landLength = data.landLength || ''
            this.submitForm.landWidth = data.landWidth || ''
            this.submitForm.landSize = data.landSize || ''
            //price
            if (data.usdPrice) {
              this.submitForm.price = data.usdPrice || ''
              this.submitForm.currencyId = 3
            } else {
              this.submitForm.price = data.mmkPrice || ''
              this.submitForm.currencyId = 1
            }
            this.submitForm.conditionTypeId = data.conditionTypeId || ''
            //furnishing
            this.submitForm.furnishingId = data.furnishingId || ''
            this.submitForm.buildYear = (data.buildYear || '').toString()
            this.submitForm.facingId = data.facingId || ''
            //feature
            this.submitForm.indoorFeatures = data.fittingList || []
            this.submitForm.outdoorFeatures = data.featureList || []
            this.submitForm.specialFeatures = data.landscapeList || []
            //description
            this.submitForm.description = this.$translateLang(data.description || '', 'unicodeTozawgyi') || ''
            //title
            this.submitForm.burmeseTitle = this.$translateLang(data.burmeseTitle || '', 'unicodeTozawgyi') || ''
            this.submitForm.englishTitle = this.$translateLang(data.englishTitle || '', 'unicodeTozawgyi') || ''
            // Photos 初始化
            if (data.photoList.length > 0) {
              // 根据后台返回的photoList中的orderNumber对图片进行排序，并将排序结果传至子组件uploadPhotos的uploadPhotoList
              let sortObj = data.photoList.sort(this.comparePhotoOrderNumber('orderNumber'))
              // 写一个测试数据 后面一定要记得删掉
              // let tempObj = {
              //   orderNumber: 0,
              //   photoId: 38877,
              //   photoUrl: "http://pkdlesu57.bkt.clouddn.com/iphone6.jpg"
              // }
              // sortObj[0] = tempObj
              this.$refs.uploadPhotos.uploadPhotoList = sortObj
            }
            //图片初始化
            //需要把showPhoto置空 否则data.images里没有的图片在showphoto里会继续存在
            // this.showPhoto = [
            //   {url: '', id: ''},
            //   {url: '', id: ''},
            //   {url: '', id: ''},
            //   {url: '', id: ''},
            //   {url: '', id: ''},
            //   {url: '', id: ''},
            //   {url: '', id: ''},
            //   {url: '', id: ''},
            // ],
            //   data.images.forEach(item => {
            //     this.showPhoto[item.sequence].url = item.url
            //   })
            // this.formData.title = this.$translateLang(data.title || '', 'unicodeTozawgyi') || ''
            //举报内容初始化
            // this.reportedBy = data.reportedBy || ''
            // this.reportedDiffTime = data.reportedDate ? this.getDateDiff(data.reportedDate) : ''
            // this.reportedDate = data.reportedDate ? this.dateFormat(data.reportedDate) : ''
            // if (data.reportedProblems) {
            //   let temparr = data.reportedProblems.split(',')
            //   //最后一项如果时空字符串就去掉
            //   if (temparr[temparr.length - 1] == '') {
            //     temparr.pop()
            //   }
            //   let finalArr = []
            //   if (temparr.indexOf('wrong_category') != -1) {
            //     finalArr.push('Wrong category')
            //   }
            //   if (temparr.indexOf('wrong_descriprtion') != -1) {
            //     finalArr.push('Wrong description')
            //   }
            //   if (temparr.indexOf('wrong_picture') != -1) {
            //     finalArr.push('Wrong picture')
            //   }
            //   if (temparr.indexOf('price_is_different_from_listing') != -1) {
            //     finalArr.push('Price is different from listing')
            //   }
            //   if (temparr.indexOf('duplicate_post') != -1) {
            //     finalArr.push('Duplicate Ad')
            //   }
            //   if (temparr.indexOf('prohibited_item') != -1) {
            //     finalArr.push('Prohibited item')
            //   }
            //   if (temparr.indexOf('counterfeit_item') != -1) {
            //     finalArr.push('Counterfeit item')
            //   }
            //   if (temparr.indexOf('no_longer_available') != -1) {
            //     finalArr.push('Item no longer available')
            //   }
            //   if (temparr.indexOf('unresponsive_poster') != -1) {
            //     finalArr.push('Unresponsive poster')
            //   }
            //   if (temparr.indexOf('scam') != -1) {
            //     finalArr.push('Scam')
            //   }
            //   this.reportedReason = finalArr
            // }
            //如果有其他原因的话 也放入这个数组
            // if (data.otherReason) {
            //   this.reportedReason.push(data.otherReason)
            // }
            //日期初始化
            // this.formData.date = this.getDateDiff(data.createDatetime)
            // this.formData.condition = data.condition === 0 ? 'New' : 'Used'
            // this.formData.brand = data.brand
            // this.formData.adDescription = this.$translateLang(data.desc || '', 'unicodeTozawgyi') || ''

            //规格初始化
            // this.getPropertyData(data.categoryId)
            // data.values.forEach(item => {
            //   this.otherForm[item.propertyId] = this.$translateLang(item.text || '', 'unicodeTozawgyi') || ''
            // })
            //用户信息初始化
            // this.formData.userName = this.$translateLang(data.sellerInfo.name || '', 'unicodeTozawgyi') || ''
            // this.formData.userDescription = this.$translateLang(data.sellerInfo.description || '', 'unicodeTozawgyi') || ''

            //初始化reject表单
            this.uploadForm = {
              reasonArr: [],
              notes: '',
            }
          }
          else {
            //后台说只有可能返回no data的错误 需求说不需要显示nodata的错误信息  所以错误的toast就不要了 直接进行页面跳转
            // this.messageToastWarning(res.data.message)
            if (this.goodsId) {
              this.$router.replace('shopAdIndex')
            }
            else {
              this.$router.replace('verificationIndex')
            }
          }
        })
          .catch(error => {
            this.loading = false
            console.log(error)
          })
        let data = {transactionId: this.propertyId}
        getPropertyLog(Object.assign(data, this.pageData))
          .then(res => {
            console.log('log数据')
            console.log(res)
            if (res.data.errorID == 0) {

            }
          })
      },
      //用于图片排序
      comparePhotoOrderNumber(property) {
        return function (obj1, obj2) {
          let value1 = obj1[property]
          let value2 = obj2[property]
          return value1 - value2     // 升序
        }
      },
      //时间格式化
      getDateDiff(dateTimeStamp) {
        if (!dateTimeStamp) return
        let minute = 1000 * 60
        let hour = minute * 60
        let day = hour * 24
        let month = day * 30
        let year = day * 365
        let now = new Date().getTime()
        let diffValue = now - dateTimeStamp
        if (diffValue < 0) return
        let monthC = diffValue / month
        let yearC = diffValue / year
        let weekC = diffValue / (7 * day)
        let dayC = diffValue / day
        let hourC = diffValue / hour
        let minC = diffValue / minute
        let result = ''
        if (yearC >= 1) {
          if (parseInt(yearC) > 1) {
            result = "" + parseInt(yearC) + " years ago"
          } else {
            result = "" + parseInt(yearC) + " year ago"
          }
        } else if (monthC >= 1) {
          if (parseInt(monthC) > 1) {
            result = "" + parseInt(monthC) + " months ago"
          } else {
            result = "" + parseInt(monthC) + " month ago"
          }
        } else if (weekC >= 1) {
          if (parseInt(weekC) > 1) {
            result = "" + parseInt(weekC) + " weeks ago"
          } else {
            result = "" + parseInt(weekC) + " week ago"
          }
        } else if (dayC >= 1) {
          if (parseInt(dayC) > 1) {
            result = "" + parseInt(dayC) + " days ago"
          } else {
            result = "" + parseInt(dayC) + " day ago"
          }
        } else if (hourC >= 1) {
          if (parseInt(hourC) > 1) {
            result = "" + parseInt(hourC) + " hours ago"
          } else {
            result = "" + parseInt(hourC) + " hour ago"
          }
        } else if (minC >= 1) {
          if (parseInt(minC) > 1) {
            result = "" + parseInt(minC) + " minutes ago"
          } else {
            result = "" + parseInt(minC) + " minute ago"
          }
        }
        return result;
      },
      dateFormat(value) {
        let date = new Date(value);
        let Y = date.getFullYear();
        let m = date.getMonth() + 1;
        let d = date.getDate();
        let H = date.getHours();
        let i = date.getMinutes();
        let s = date.getSeconds();
        if (m < 10) {
          m = '0' + m;
        }
        if (d < 10) {
          d = '0' + d;
        }
        if (H < 10) {
          H = '0' + H;
        }
        if (i < 10) {
          i = '0' + i;
        }
        if (s < 10) {
          s = '0' + s;
        }
        let t = d + '-' + m + '-' + Y + '  ' + H + ':' + i + ':' + s;
        return t;
      },
      //价格格式化
      regexNum(v, len, split) {
        split = split || ',', len = Math.abs((+len) % 20 || 2)
        v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
        v = parseFloat(v) + ''
        return v.replace(/\d+/, function (v) {
            var lit = v.length % 3 == 0
            var index = lit ? v.length - 3 : -1
            return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
              return k + ((l == index && lit) ? '' : split)
            }).split('').reverse().join('')
          }
        )
      },
      approve() {
        this.loading = true
        propertyVerifyApprove({id: this.propertyId}).then(res => {
          this.loading = false
          if (res.data.errorID == 0) {
            this.messageToastSuccess('Approve Success')
          }
          else {
            this.messageToastWarning(res.data.message)
          }
          // 上传成功 判断是从view来的单条数据还是从verificationindex来的多条数据 如果是前者 跳转到shopAdIndex页面
          if (this.goodsId) {
            this.$router.replace('/shopAdIndex')
          }
          // 如果是后者 请求下一条数据
          else {
            this.initForm()
          }
        })
          .catch(error => {
            this.loading = false
            this.messageToastErr('Error, Please Try Again Later')
            console.log(error)
          })
      },
      reject() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            let config = {
              'Content-Type': 'multipart/form-data'
            }
            //遍历这个数组，把不为空的值拼接成一个字符串
            let reasonStr = ''
            this.uploadForm.reasonArr.forEach(item => {
              if (item) {
                reasonStr += item + ','
              }
            })
            // 删掉字符串最后一位的逗号
            let finalStr = reasonStr.slice(0, reasonStr.length - 1)
            let params = {
              reason: finalStr,
              id: this.propertyId,
              notes: this.$translateLang(this.uploadForm.notes || '', 'zawgyiTounicode') || ''
            }
            propertyVerifyReject(params).then(res => {
              this.loading = false
              if (res.data.errorID === 0) {
                this.messageToastSuccess('reject Success')
              }
              else {
                this.messageToastWarning(res.data.message)
              }
              if (this.goodsId) {
                this.$router.replace('/shopAdIndex')
              }
              else {
                this.initForm()
              }
            })
              .catch(error => {
                this.loading = false
                this.messageToastErr('Error, Please Try Again Later')
                console.log(error)
              })
          }
          else {
            this.messageToastErr('Please Select Reject Reasons')
          }
        })
      },
      notSure() {
        this.loading = true
        propertyVerifyNotSure({id: this.propertyId}).then(res => {
          this.loading = false
          if (res.data.errorID === 0) {
            this.messageToastSuccess('Not Sure Success')
          }
          else {
            this.messageToastWarning(res.data.message)
          }
          if (this.goodsId) {
            this.$router.replace('/shopAdIndex')
          }
          else {
            this.initForm()
          }
        })
          .catch(error => {
            this.loading = false
            this.messageToastErr('Error, Please Try Again Later')
            console.log(error)
          })
      },
      //图片无法加载时使用默认图片
      // userPhotoError(item) {
      //   item.photo = require('../static/img/images/user-pto.png');
      // },
      //数据接口和数据结构不同 所以重新写了一个初始化数据的方法
      // initGoodsVerify() {
      //   this.loading = true
      //   let params = {
      //     goodsId: this.$route.query.goodsId,
      //     verificationStatus: this.$route.query.verificationStatus,
      //     status: this.status
      //   }
      //   getVerifyDataById(qs.stringify(params)).then(res => {
      //     this.loading = false
      //     // 拿到新数据后页面置顶
      //     window.scrollTo(0, 0);
      //     if (res.data.errorID === 0) {
      //       let obj = res.data.object
      //       //图片初始化
      //       this.showPhoto = [
      //         {url: '', id: ''},
      //         {url: '', id: ''},
      //         {url: '', id: ''},
      //         {url: '', id: ''},
      //         {url: '', id: ''},
      //         {url: '', id: ''},
      //         {url: '', id: ''},
      //         {url: '', id: ''},
      //       ],
      //         obj.images.forEach(item => {
      //           this.showPhoto[item.sequence].url = item.url
      //         })
      //       this.formData.title = obj.title
      //       //价格初始化
      //       this.formData.price = obj.price ? this.regexNum(obj.price) : ''
      //       this.formData.priceType = obj.priceType === 1 ? 'Kyat' : 'Lakh'
      //       //日期初始化
      //       this.formData.date = this.getDateDiff(obj.createDatetime)
      //       this.formData.condition = obj.condition === 0 ? 'New' : 'Used'
      //       this.formData.brand = obj.brand
      //       this.formData.adDescription = obj.desc
      //       //分类初始化
      //       let categoryName = obj.category.categoryName
      //       let categoryArr = categoryName.split('/')
      //       this.formData.firstCategory = categoryArr[0] || ''
      //       this.formData.secondaryCategory = categoryArr[1] || ''
      //       this.formData.thirdCategory = categoryArr[2] || ''
      //       //区域初始化
      //       this.formData.regionId = obj.regionId
      //       this.getTownships()
      //       this.formData.townshipId = obj.townshipId
      //       //规格初始化
      //       this.getPropertyData(obj.categoryId)
      //       obj.values.forEach(item => {
      //         this.otherForm[item.propertyId] = item.text
      //       })
      //       //用户信息初始化
      //       this.formData.userName = obj.sellerInfo.name
      //       this.formData.userDescription = obj.sellerInfo.description
      //       //id初始化
      //       this.adID = obj.id
      //       //初始化reject表单
      //       this.uploadForm = {
      //         reasonArr: [],
      //         notes: '',
      //       }
      //     }
      //     else {
      //       // this.messageToastWarning(res.data.message)
      //       if (this.goodsId) {
      //         this.$router.replace('/shopAdIndex')
      //       }
      //       else {
      //         this.$router.replace('/verificationIndex')
      //       }
      //     }
      //   })
      //     .catch(error => {
      //       this.loading = false
      //       console.log(error)
      //     })
      // },
      showBigImage(url) {
        this.showMask = true
        this.bigImageUrl = url
      },
    },
    components: {
      showManyImages
    },
    mounted() {
      if (this.$route.query.verificationStatus) {
        this.verificationStatus = this.$route.query.verificationStatus || ''
      }
      if (this.$route.query.status) {
        this.submitForm.status = this.$route.query.status || ''
      }
      //如果是获取单个商品的数据 就使用单个商品初始化的方法
      if (this.$route.query.goodsId) {
        this.goodsId = this.$route.query.goodsId
        this.initGoodsVerify()
      }
      else {
        this.initForm()
      }
      // //获得photo高度
      // let dom= document.querySelector('#photo')
      // console.dir(dom)
      // console.dir(dom.offsetTop)
      // console.dir(dom.offsetLeft)
      // this.positionTop=dom.offsetTop+'px'
    },
  }
  ;
</script>

<style scoped>
  .image-wraper {
    margin: 20px 0;
  }

  .image-box {
    display: inline-block;
    border: solid 1px black;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    cursor: pointer;
    margin-left: 5px;
  }

  .image-box img {
  }

  .verify-outwraper {
    width: 100%;
    font-family: "Microsoft YaHei";
    padding: 20px 0 0 20px;
    position: relative;
    z-index: 100;
  }

  .menu {
    color: rgb(121, 121, 121);
    font-size: 20px;
    display: inline-block;
    width: 300px;
  }

  .menu-data-price {
    color: rgb(219, 55, 67);
    font-size: 25px;
    display: inline-block;
    width: 500px;
    word-break: break-all;
    vertical-align: top;
  }

  .menu-price {
    color: rgb(219, 55, 67);
    font-size: 25px;
    display: inline-block;
    width: 55px;
  }

  .menu-data {
    font-size: 20px;
  }

  .menu-data-category {
    color: rgb(0, 0, 0);
    margin-left: 305px;
    font-size: 20px;
  }

  .menu-data-date {
    color: rgb(161, 161, 161);
    margin-left: 50px;
  }

  .menu-data-title {
    font-size: 20px;
    display: inline-block;
    width: 600px;
    word-break: break-all;
    vertical-align: top;
    line-height: 36px;
  }

  .menu-data-desc {
    display: inline-block;
    font-size: 20px;
    width: 600px;
    word-break: break-all;
    vertical-align: top;
  }

  .verify-table {
    margin-top: 20px;
  }

  .nav-bar {
    color: rgb(14, 108, 156);
    font-size: 20px;
    text-decoration: underline;
    margin: 20px 0 40px 0;
    cursor: pointer;
    user-select: none;
    display: inline-block;
  }

  .pageDisable {
    color: rgba(14, 108, 156, .5) !important;
    cursor: not-allowed !important;
  }

  .menu-row {
    margin: 5px 0;
  }

  .mask {
    position: absolute;
    z-index: 2100;
    background-color: rgba(33, 33, 33, .2);
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
  }

  .big-image {
    position: fixed;
    left: 50%;
    top: 100px;
    transform: translateX(-30%);
    width: 800px;
    z-index: 2200;
  }

  .total-wraper {
    position: relative;
    width: 100%;
  }

  .reported-by {
    font-size: 18px;
    color: rgb(219, 55, 67);
    margin: 0;
  }

  .reported-title {
    font-size: 20px;
    margin: 10px 0;
    font-weight: 600;
  }

  .reported-date {
    font-size: 18px;
  }

  .length-width {
    display: flex;
    align-items: center;
    margin: 0 10px 20px 30px;
  }

  .length-width input {
    height: 24px;
    line-height: 24px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    text-indent: 10px;
    color: rgb(96, 98, 102);
    cursor: not-allowed;
  }

  .length-width span {
    margin: 0 5px;
  }

  .line {
    padding: 10px;
    border-bottom: 1px solid #d4d3d3;
  }

  .price-box {
    padding: 20px 0;
  }

  .title {
    padding: 10px 0;
    font-size: 16px;
    color: #ef9f02;
    font-weight: bold;
  }

  .content {
    font-size: 16px;
  }

  .icon-item {
    margin: 0 5px;
  }

  .green-icon {
    color: #0fcb75;
    margin-right: 3px;
  }


</style>
